<template>
    <div :class="className" :style="{ color: color, fontSize: size + 'px' }">
        <el-tooltip :showAfter="showAfter" :offset="offset" :effect="effect" :disabled="isDisabledTooltip" :content="content" :placement="placement">
            <div class="ellipsis" @mouseover="onMouseOver(refName)">
                <span :ref="(el) => setRef(el, refName)" class="text_c">{{ content }}</span>
            </div>
        </el-tooltip>
        <el-icon v-if="!isText" @click="emits('close')" size="12" class="delete_icon">
            <CloseBold />
        </el-icon>
    </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from 'vue'


import _ from 'lodash'

const props = defineProps({
    // 显示的文字内容
    content: String,
    // 设置父元素的样式：比如宽度字体等，需可以自己在组件内部配置样式比如字体大小20：fs20
    className: {
        type: String,
        default: () => {
            return 'text-over-tooltip-components';
        }
    },
    // 偏移位置
    offset:{
        type: Number,
        default: () => {
            return 12;
        }
    },
    // 在触发后多久显示内容，单位毫秒
    showAfter:{
        type: Number,
        default: () => {
            return 0;
        }
    },
    // 子元素标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: String,
    // 是否显示关闭X
    isText: {
        type: Boolean,
        default: () => {
            return false;
        }
    },
    // 颜色
    color: {
        type: String,
        default: () => {
            return '#aaa';
        }
    },
    // 字体大小
    size: {
        type: [String, Number],
        default: () => {
            return 12;
        }
    },
    // 默认提供的主题 dark/light
    effect: {
        type: String,
        default: () => {
            return 'dark';
        }
    },
    // Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
    placement: {
        type: String,
        default: () => {
            return 'bottom';
        }
    },
})
const { content, className, refName, effect, placement } = toRefs(props)
const emits = defineEmits(['close'])
const isDisabledTooltip = ref(true)//是否需要禁止提示
const refMap = {}
const setRef = (el, str) => {
    if (el) {
        refMap[`${str}`] = el
    }
}
// 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
const onMouseOver = (str) => {
    let parentWidth = refMap[str].parentNode.offsetWidth;
    let contentWidth = refMap[str].offsetWidth;
    let parenHeight = refMap[str].parentNode.offsetHeight;
    let contentHeight = refMap[str].offsetHeight;
    // 判断是否禁用tooltip功能
    isDisabledTooltip.value = contentWidth <= parentWidth&&contentHeight < parenHeight;
}
</script>

<style lang="scss" scoped>
.text-over-tooltip-components {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 22px;
    padding: 0 4px;
    margin-bottom: 6px;
    .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;

}

}

.is_textClass {
    display: flex;
    align-items: center;
    height: 100%;
    width:160px;
    .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    padding: 0 ;
    width: 100%;

}
}
.fs20{
    display: flex;
}
.is_textClass_content {
    display: flex;
    align-items: center;
    height: 100%;
    // width:160px;
    .ellipsis{
        padding: 0 ;
        width: 100%;
        .text_c{
            display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-all;
        width: 100%;
        }
    }
}

/* 文字超出宽度显示省略号 单行 */


.delete_icon {
    margin-top: 2px;
    margin-left: 6px;
    padding: 2px;

    &:hover {
        background-color: #eee;
        border-radius: 50%;
    }
}

.text-over-tooltip-components:has(.delete_icon:hover) {
    .ellipsis {
        background-color: #eee;
    }

}
</style>